<template>
  <el-button type="text" @click="setHotLayer">生成热力图</el-button>
  <el-button type="text" @click="resetData">关闭热力图</el-button>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted, toRefs } from "vue";
const { proxy } = getCurrentInstance();
import { useSearchedAccidentsStore } from "@/stores/serachedAccidents";
const { hotData } = toRefs(useSearchedAccidentsStore());
let features = [];
let sourceHeat = null;
const $map = ref(null);

function setHotLayer() {
  //console.log(hotData.value.features);
  let arr = hotData.value.features.map((item) => {
    return item.geometry.coordinates[0];
  });
  //console.log(arr);
  features = [];
  arr.forEach((item) => {
    let f = new ol.Feature({
      geometry: new ol.geom.Point([item[0], item[1]]), // 添加点坐标
    });
    features.push(f);
  });
  sourceHeat.addFeatures(features);
}

/* 关闭热力图 */
function resetData() {
  sourceHeat.clear();
}
onMounted(() => {
  /* 1、获取map实例 */
  $map.value = proxy.$map;
  /* 2、创建热力图layer */
  sourceHeat = new ol.source.Vector();
  const layerHeat = new ol.layer.Heatmap({
    title: "heatmap",
    source: sourceHeat,
    blur: 50,
    radius: 30,
    gradient: ["#2200FF", "#E8D225", "#EF1616"],
    zIndex: 4,
    opacity: 0.5,
  });
  $map.value.addLayer(layerHeat);
});
</script>
<style scoped></style>
